<template>
  <div id="app">
      <div class="wrap">
          <lb-header :leftShow="false" :title="'篱笆闲聊'"></lb-header>
          <main class="con">
            <ul>
              <lb-item v-for="(item,index) in list" :key="index"
                  :name="item.name"
                  :title="item.title"
                  :con="item.con"
                  :time="item.time"
              ></lb-item>
            </ul>
          </main>
          <button class="open" @click="open">发布</button>
      </div>
      <lb-dialog v-show="isShow"></lb-dialog>
  </div>
</template>

<script>
import LbHeader from '@/components/lbHeader'
import LbDialog from '@/components/lbDialog'
import lbItem from '@/components/lbItem'
import axios from 'axios'
export default {
  name: 'App',
  components: {
    LbHeader,
    LbDialog,
    lbItem
  },
  data(){
    return {
      isShow:false,
      list:[]
    }
  },
  created(){
    this.getData();

    this.bus.$on('close',() => {
      this.isShow = false;
      this.getData();
    })
  //  console.log("===beforeCreate==")
  },
  methods:{
    open(){
      this.isShow = true;
    },
    getData(){
      axios.get('/api/list').then(res => {
        console.log(res);
        if(res.data.code === 1){
          this.list = res.data.data;
        }
      })
    }
    // close(){
    //   this.isShow = false;
    // }
  }
}
</script>

<style lang="scss">
*{
  margin:0;
  padding:0;
  list-style: none;
  box-sizing: border-box
}

html,body,#app{
  width:100%;
  height: 100%;
  overflow: hidden;;
}

.wrap{
  width:100%;
  height: 100%;
  display: flex;
  flex-direction:column;
}

.con{
  width:100%;
  flex:1;
  overflow: scroll;
}

.open{
  width:100%;
  height: 40px;
  background: #eee;
}
</style>
